<template>
	<a-card :bordered="false">
		<a-row v-if="dynamicFields.length === 0">
			<p style="text-align: center">~暂无设计字段~</p>
		</a-row>

		<a-row
			:gutter="12"
			v-if="textFields.length > 0 || numberFields.length > 0 || dateFields.length > 0 || textSearchFields.length > 0"
		>
			<input-text
				v-for="(field, index) in textFields"
				:ref="field.fieldCode"
				:form="form"
				:data="field"
				:key="field.fieldCode + index"
			/>
			<input-number
				v-for="(field, index) in numberFields"
				:ref="field.fieldCode"
				:form="form"
				:data="field"
				:key="field.fieldCode + index"
			/>
			<input-date
				v-for="(field, index) in dateFields"
				:ref="field.fieldCode"
				:form="form"
				:data="field"
				:key="field.fieldCode + index"
			/>
			<input-search
				v-for="(field, index) in textSearchFields"
				:ref="field.fieldCode"
				:form="form"
				:data="field"
				:key="field.fieldCode + index"
			/>
			<a-divider dashed />
		</a-row>

		<a-row v-if="selectFields.length > 0">
			<input-select
				v-for="(field, index) in selectFields"
				:ref="field.fieldCode"
				:form="form"
				:data="field"
				:key="field.fieldCode + index"
			/>
			<a-divider dashed />
		</a-row>

		<a-row v-if="switchFields.length > 0 || selectFields.length > 0">
			<input-switch
				v-for="(field, index) in switchFields"
				:ref="field.fieldCode"
				:form="form"
				:data="field"
				:key="field.fieldCode + index"
				@change="switchChange"
			/>
			<template v-if="showSelect">
				<input-select
					v-for="(field, index) in selectFields"
					:ref="field.fieldCode"
					:form="form"
					:data="field"
					:key="field.fieldCode + index"
				/>
			</template>
			<!-- <a-divider dashed /> -->
		</a-row>

		<a-row v-if="rateFields.length > 0">
			<input-rate
				v-for="(field, index) in rateFields"
				:ref="field.fieldCode"
				:form="form"
				:data="field"
				:key="field.fieldCode + index"
			/>
			<a-divider dashed />
		</a-row>

		<a-row v-if="tagsFields.length > 0">
			<input-tag
				v-for="(field, index) in tagsFields"
				:ref="field.fieldCode"
				:form="form"
				:data="field"
				:key="field.fieldCode + index"
			/>
			<a-divider dashed />
		</a-row>

		<a-row v-if="fileFields.length > 0">
			<upload-list
				v-for="(field, index) in fileFields"
				:singleFile="true"
				:ref="field.fieldCode"
				:form="form"
				:data="field"
				:key="field.fieldCode + index"
			/>
			<a-divider dashed />
		</a-row>

		<a-row v-if="attachFields.length > 0">
			<upload-list
				v-for="(field, index) in attachFields"
				:ref="field.fieldCode"
				:form="form"
				:data="field"
				:key="field.fieldCode + index"
			/>
			<a-divider dashed />
		</a-row>

		<a-row v-if="textareaFields.length > 0">
			<input-textarea
				v-for="(field, index) in textareaFields"
				:ref="field.fieldCode"
				:form="form"
				:data="field"
				:key="field.fieldCode + index"
			/>
			<a-divider dashed />
		</a-row>

		<a-row v-if="pictureFields.length > 0">
			<upload-cover
				v-for="(field, index) in pictureFields"
				:ref="field.fieldCode"
				:form="form"
				:data="field"
				:key="field.fieldCode + index"
			/>
			<a-divider dashed />
		</a-row>

		<a-row v-if="editorFields.length > 0">
			<tinymce-editor
				v-for="(field, index) in editorFields"
				:ref="field.fieldCode"
				:form="form"
				:data="field"
				:key="field.fieldCode + index"
			/>
		</a-row>
	</a-card>
</template>

<script>
import moment from 'moment'
import store from '@/store'
import inputText from './FormComponent/InputText'
import InputSearch from './FormComponent/InputSearch'
import InputNumber from './FormComponent/InputNumber'
import InputTextarea from './FormComponent/InputTextarea'
import InputTag from './FormComponent/InputTag'
import InputSwitch from './FormComponent/InputSwitch'
import InputDate from './FormComponent/InputDate'
import UploadCover from './FormComponent/UploadCover'
import TinymceEditor from './FormComponent/TinymceEditor'
import UploadList from './FormComponent/UploadList'

import inputSelect from './FormComponent/InputSelect'
import InputRate from './FormComponent/InputRate'

export default {
	name: 'DynameicFrom',
	components: {
		inputText,
		InputSearch,
		InputTextarea,
		InputNumber,
		InputTag,
		InputSwitch,
		InputDate,
		UploadCover,
		UploadList,
		TinymceEditor,
		inputSelect,
		InputRate


	},
	props: {
		form: {
			type: Object,
			required: true,
		},
		initFromClear: {
			type: Boolean,
			required: false,
			default: true,
		},
	},
	data() {
		return {
			labelCol: {
				xs: {
					span: 24,
				},
				sm: {
					span: 3,
				},
			},
			wrapperCol: {
				xs: {
					span: 24,
				},
				sm: {
					span: 20,
				},
			},
			dynamicFields: [],
			textFields: [],
			textSearchFields: [],
			textareaFields: [],
			numberFields: [],
			dateFields: [],
			fileFields: [],
			attachFields: [],
			pictureFields: [],
			radioFields: [],
			checkboxFields: [],
			tagsFields: [],
			switchFields: [],
			editorFields: [],

			selectFields: [],
			rateFields: [],

			headers: {
				Authorization: 'bearer  ' + store.getters.token,
			},
			showSelect: false,
		}
	},
	mounted: function () {
		this.$nextTick(function () {})
	},
	created() {},
	methods: {
		moment,
		setFields(dynamicFields) {
			if (dynamicFields && dynamicFields.length > 0) {
				this.initClear()
				this.dynamicFields = dynamicFields
				this.handFields(dynamicFields)
			}
		},
		handFields(dynamicFields) {
			for (let i = 0; i < dynamicFields.length; i++) {
				const field = dynamicFields[i]
				if (field.inputType === 'text') {
					this.textFields.push(field)
				} else if (field.inputType === 'input-search') {
					this.textSearchFields.push(field)
				} else if (field.inputType === 'number') {
					this.numberFields.push(field)
				} else if (field.inputType === 'date') {
					this.dateFields.push(field)
				} else if (field.inputType === 'switch') {
					this.switchFields.push(field)
					if (field.fieldName == '是否卖票') {
						this.showSelect = field.defaultValue
					}
				} else if (field.inputType === 'textarea') {
					this.textareaFields.push(field)
				} else if (field.inputType === 'tags') {
					this.tagsFields.push(field)
				} else if (field.inputType === 'picture') {
					this.pictureFields.push(field)
				} else if (field.inputType === 'radio') {
					this.radioFields.push(field)
				} else if (field.inputType === 'checkbox') {
					this.checkboxFields.push(field)
				} else if (field.inputType === 'editor') {
					this.editorFields.push(field)
				} else if (field.inputType === 'file') {
					this.fileFields.push(field)
				} else if (field.inputType === 'attach') {
					this.attachFields.push(field)
				} else if (field.inputType === 'select') {
					this.selectFields.push(field)
				} else if (field.inputType === 'rate') {
					this.rateFields.push(field)
				}
			}
			this.setDefaultVal()
		},
		setDefaultVal() {
			const _this = this
			// const timer = setInterval(() => {
			//   const attrs = Object.keys(_this.$refs)
			//   if (attrs.length > 0) {
			//     _this.loopSetFields()
			//     clearInterval(timer)
			//   }
			// }, 100)
			setTimeout(() => {
				_this.loopSetFields()
			}, 200)
		},
		submitFrom() {
			const {
				form: { validateFields },
			} = this
			validateFields((errors, values) => {
				if (!errors) {
					this.loopFields(values)
					this.$emit('submit', values)
				}
			})
		},

		loopFields(values) {
			const fieldArr = [this.tagsFields, this.pictureFields, this.editorFields, this.fileFields, this.attachFields]
			for (let i = 0; i < fieldArr.length; i++) {
				this.getFieldsValue(values, fieldArr[i])
			}
		},
		loopSetFields() {
			const fieldArr = [this.tagsFields, this.pictureFields, this.editorFields, this.fileFields, this.attachFields]
			for (let i = 0; i < fieldArr.length; i++) {
				this.setFieldsValue(fieldArr[i])
			}
		},
		getFieldsValue(values, fields) {
			if (fields.length > 0) {
				for (let i = 0; i < fields.length; i++) {
					const field = fields[i]
					const value = this.$refs[field.fieldCode][0].getFieldValue()
					values[field.fieldCode] = value
				}
			}
		},
		setFieldsValue(fields) {
			if (fields.length > 0) {
				for (let i = 0; i < fields.length; i++) {
					const field = fields[i]
					if (this.$refs.hasOwnProperty(field.fieldCode)) {
						this.$refs[field.fieldCode][0].setFieldValue(field.defaultValue)
					}
				}
			}
		},
		initClear() {
			this.textFields = []
			this.textSearchFields = []
			this.numberFields = []
			this.dateFields = []
			this.switchFields = []
			this.textareaFields = []
			this.tagsFields = []
			this.pictureFields = []
			this.radioFields = []
			this.checkboxFields = []
			this.editorFields = []
			this.fileFields = []
			this.attachFields = []
			this.selectFields = []
			this.rateFields = []
			if (this.initFromClear) {
				this.form.resetFields()
			}
		},
		resetFieldsClear(resetForm) {
			this.textFields = []
			this.textSearchFields = []
			this.numberFields = []
			this.dateFields = []
			this.switchFields = []
			this.textareaFields = []
			this.tagsFields = []
			this.pictureFields = []
			this.radioFields = []
			this.checkboxFields = []
			this.editorFields = []
			this.fileFields = []
			this.attachFields = []
			this.selectFields = []
			this.rateFields = []
			if (resetForm) {
				this.form.resetFields()
			}
		},
		clearFields() {
			const fieldArr = [this.tagsFields, this.pictureFields, this.editorFields, this.fileFields, this.attachFields]
			for (let i = 0; i < fieldArr.length; i++) {
				this.setFieldsClear(fieldArr[i])
			}
		},
		setFieldsClear(fields) {
			if (fields.length > 0) {
				for (let i = 0; i < fields.length; i++) {
					const field = fields[i]
					this.$refs[field.fieldCode][0].fieldClear()
				}
			}
		},
		switchChange(data) {
			this.showSelect = data
		},
	},
}
</script>
<style>
/* you can make up upload button and sample style by using stylesheets */
.ant-upload-select-picture-card i {
	font-size: 32px;
	color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
	margin-top: 8px;
	color: #666;
}

.file_div {
	margin-bottom: 15px;
	border: solid rgb(208, 208, 208) 1px;
	min-height: 100px;
	overflow: auto;
	border-radius: 5px;
}

.has-error .ant-form-explain,
.has-error .ant-form-split {
	color: #f5222d;
	line-height: 20px;
}
</style>
